<template>
  <div class="main_app">
    <h1>Text Marker 是一个网页文字标记插件</h1>
    <p style="font-size: 18px;">
      Text Marker 是一个网页文字标记插件,类似于荧光笔的作用。<br/>
      当您选中文本之后，您可以点击键盘上到数字键(1、2、3、4、5、6、7)来标记文本。
      <br/>
      这7个数字分别代表不同的颜色（赤橙黄绿青蓝紫）。 这个插件会将您标记的文本设置不同的背景色，以便于您更快速的找到您标记的文本。
      <br/>
      如果您要取消标记，当您选择文本后按数字键0或Esc键，都可以取消标记。
      <br/>
      <img src="/intro.png" alt="intro"
           style="display: block;width: 500px;margin: 20px auto;border: 1px solid #ccc; border-radius: 3px;">
      <br/>
      如果您要对此网页标记插件提出任何建议或者意见，欢迎您给我发邮件 410867997@qq.com
    </p>
    <div>
      <h1>已标记的文字</h1>
      <ul>
        <li class="word" v-for="(word,index) in allWords" :key="word.text">
          <span class="no">{{ index + 1 }}</span>
          <span class="text">{{ word.word }}</span>
          <a class="del" @click="removeWord(index)">删除</a>
        </li>
      </ul>
    </div>
    <div style="margin-top: 200px;">
      <button @click="cleanWords">清除所有标记的文字</button>
    </div>
  </div>
</template>

<script setup>
import {ref, onMounted} from "vue";

const allWords = ref([])

onMounted(() => {
  chrome.storage.local.get('words', (result) => {
    allWords.value = result.words || []
  })
})

const cleanWords = () => {
  // chrome.storage.local.clear(() => {
  //   alert('cleared')
  // })
  allWords.value = [];
  chrome.storage.local.set({words: []}, () => {
    console.log('delete all success');
  })
}

const removeWord = (index) => {
  allWords.value.splice(index, 1)
  chrome.storage.local.set({words: JSON.parse(JSON.stringify(allWords.value))}, () => {
    console.log('delete success');
  })
}

</script>

<style>
.main_app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.word {
  display: inline-block;
  background: #cccccc;
  margin: 5px;
  padding: 5px 10px;
  line-height: 25px;
  height: 25px;
  border-radius: 3px;
}

.no {
  color: #666;
}

.text {
  font-size: 20px;
  margin: auto 10px;
  font-weight: bold;
  color: #333;
}

.del {
  color: blue;
  cursor: pointer;
}

.del:hover {
  text-decoration: underline;
}
</style>
